<template>
  <!--容器盒子-->
  <div class="page-container">

    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>组织中心</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户添加素材</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="toolbar"> 
      <el-container>
        <el-aside width="240px" class="el-aside-Superior">
          <div class="tab-container">
          <el-tabs v-model="treeActiveName" type="card" @tab-click="handleClick" :stretch="stretch" >
            <el-tab-pane label="我的素材" name="1">
              <el-tree :data="localTreeList" :props="defaultProps" @node-click="handleNodeTreeClick"></el-tree>
            </el-tab-pane>
            <el-tab-pane label="平台素材" name="2">
              <el-tree :data="deptTreeList" :props="defaultProps" @node-click="handleNodeTreeClick"></el-tree>
            </el-tab-pane>
          </el-tabs>
          </div>
        </el-aside>
        <el-main>
          <div class="material-main">
            <div class="material-header">
              <div class="material-title-left">
                {{materialTitle}}
              </div>
              <div class="material-title-right" v-if="materialQueryPageFilters.categoryId != null">
                <el-input type="text" v-model="materialQueryPageFilters.materialName" placeholder="请输入素材名称" class="mr20" clearable></el-input>
                <el-button type="primary" @click="handleNodeClick" icon="el-icon-search">搜索</el-button>
              </div>
            </div>
            <div style="overflow:hidden">
              <!-- <el-col :span="4"> -->
              <div  class="uploader">
                <el-upload align="center"
                  class="avatar-uploader"
                  v-if="materialCategoryLevel == 3 && canEdit == true && nofirstCanEdit == true"            
                  action
                  :auto-upload="true"
                  :http-request="uploadMethod"
                  :show-file-list="false"
                  list-type="picture-card"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                  :before-upload="beforeAvatarUpload">
                  <i  class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <!-- </el-col> -->
              <!-- <el-col :span="20"> -->
                <!-- style="float:left;width:80%" -->
              <div class="material-main-list" style="float:left;width:80%">
                <div class="material-main-item " :class="[materialList[index].isSelect == true ? 'material-main-item-select' : '']" v-for="(item , index) in materialList" :key="index" >
                  <div class="material-main-item-img">
                    <img :src="item.materialUrl" style="width:100%;height: 100%;"/>
                  </div>
                  <div v-if="materialList[index].isSelect" class="material-main-item-delete">
                    <span @click="deleteMaterial(index)">×</span>
                  </div>
                  <div class="material-main-item-name">
                    <el-input type="text" v-model="item.materialName" @change="editMaterial(index)" :disabled="!materialList[index].isSelect" ></el-input>
                  </div>
                  <span @click="selectMaterial(index)" class="font12 editText color999" v-if="deptType == item.deptType" >编辑</span>
                  <!-- "deptType == item.deptType" -->
                </div>
                <div v-if="materialList.length < 1" style="text-align: center;width: 100%;">
                  暂无数据
                </div>
              </div>
              <!-- </el-col> -->
            </div>
            <div v-if="materialList.length > 0" class="pagination t_r">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="materialQueryPageFilters.start"
                :page-sizes="[10]"
                :page-size="materialQueryPageFilters.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="materialListTotal">
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";

  export default {
  components: {
    KtButton
  },
  data() {
    return {
       //素材分类tabs选项卡是否自动撑开
       stretch: true,
       treeActiveName:"1",
       localTreeList:[],//本地树
       deptTreeList:[],//平台树
       defaultProps: {
          children: 'treeInfoList',
          label: 'categoryName'
       },
        //查询素材列表分页
       materialQueryPageFilters:{
          start: 1,
          limit: 10,
          materialName: null
       },
       //素材列表页title
       materialTitle: '',
       materialTitleId: null, //当前展示页的分类ID
       materialCategoryLevel: null, //当前展示页的级别

      //素材List
       materialList:[],
       materialListTotal:0, //素材列表总条数
       nowIndex: 1, //当前页码
       dialogImageName: '',
       nofirstCanEdit: false, //点击tabs的时候
       canEdit: false, //是否可以编辑
       deptTreeCanEdit: false,
       localTreeCanEdit: false,
       deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
    };
  },
  methods: {
    /**
     * 菜单树选项卡
     */
    handleClick(tab){
      this.materialQueryTree();
      let flag = tab.name;
      console.log(tab.name)  //获取到当前元素的id
      if(flag == 1){
        this.canEdit = this.localTreeCanEdit;
      }else {
        this.canEdit = this.deptTreeCanEdit;
      }
      this.nofirstCanEdit = false;
    },
    /**
     * 查询素材树
     */
    materialQueryTree(){
        let that = this;
        this.utils.request.materialQueryTree({},res=>{
            this.deptTreeList = res.data.deptTreeList;
            this.localTreeList = res.data.localTreeList;
            this.deptTreeCanEdit = res.data.deptTreeCanEdit;
            this.localTreeCanEdit = res.data.localTreeCanEdit;

        })
    },
    /**
     *选择素材
     */
    selectMaterial(index){
        if(this.materialList[index].isSelect == true){
            this.materialList[index].isSelect = false;
        }else{
            this.materialList[index].isSelect = true;
        }
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    beforeAvatarUpload(file) {
      this.dialogImageName = file.name;

      var isJPG =false;
      if(file.type === 'image/jpeg' || file.type === 'image/png'){
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message({
              message: '上传头像图片只能是 JPG 或 PNG 格式!',
              type: 'error',
              center:true,
              offset:250,
              duration:1000
        });
      }
      if (!isLt2M) {
         this.$message({
              message: '上传头像图片大小不能超过 2MB!',
              type: 'error',
              center:true,
              offset:250,
              duration:1000
        });
      }
      return isJPG && isLt2M;
    },

    // 上传图片成功回调
    handleSuccess(res){
      // let param = {};
      // param.categoryId = this.materialTitleId;
      // param.materialName = this.dialogImageName;
      // param.materialUrl = res.data.imgUrl;

      // this.utils.request.materialAdd(param, res=>{
      //   console.log(res);
      //   this.$message({message: "上传成功", type: "success"});
      //   this.handleCurrentChange(this.nowIndex);
      // })
    },

    uploadMethod(val){
      let param = new FormData();
      //通过append向form对象添加数据
      param.append("file", val.file);
      //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      this.utils.request.upload(param,res=>{
        if(res.code == '0000'){
          let request = {};
          request.categoryId = this.materialTitleId;
          request.materialName = this.dialogImageName;
          request.materialUrl = res.data.imageUrl;
          this.utils.request.materialAdd(request, res=>{
            this.$message({message: "上传成功", type: "success"});
            this.handleCurrentChange(this.nowIndex);
          })
        }else{
          this.$message({ message: "上传失败，请重试", type: "error" });
        }
      });
    },
    handleError(){
      this.$message({message: "上传失败", type: "fail"});
    },

    // 编辑
    editMaterial(index){
      this.utils.request.materialUpdate(this.materialList[index], res=>{
        console.log(res);
        this.materialList[index].isSelect = false;
      })
    },
    // 删除
    deleteMaterial(index){
      this.utils.request.materialDelete(this.materialList[index], res=>{
        console.log(res);
        this.handleCurrentChange(this.nowIndex);
      })
    },

    handleNodeTreeClick(data){
      this.nofirstCanEdit = true;
      this.handleNodeClick(data);
    },

    /**
     * 菜单树选项卡
     */
    handleNodeClick(data){
      if(data != undefined && data.id != null){
            this.materialQueryPageFilters.materialName = null;
        }
        console.log(data);
        this.materialTitle = data != undefined && data.categoryName != null ? data.categoryName : this.materialTitle;
        this.materialTitleId = data != undefined && data.id != null ? data.id : this.materialTitleId;
        this.materialCategoryLevel = data != undefined && data.categoryLevel != null ? data.categoryLevel : this.materialCategoryLevel;
        this.materialQueryPageFilters.categoryId = data != undefined && data.id != null ? data.id : this.materialQueryPageFilters.categoryId;
        this.materialQueryPageFilters.materialName = this.materialQueryPageFilters.materialName == '' ? null : this.materialQueryPageFilters.materialName;
        this.utils.request.materialQueryPage(this.materialQueryPageFilters,res=>{
            console.log(res);
            res.data.rows.forEach(item => {
                item.isSelect  = false;
            })
            this.materialList = res.data.rows;
            this.materialListTotal = res.data.total;
        })
    },

    /**
     * 素材列表条数
     */
    handleSizeChange(val){
        this.materialQueryPageFilters.limit = val;
        this.handleNodeClick(undefined);
    },
    /**
     * 换页
     */
    handleCurrentChange(val){
        this.materialQueryPageFilters.start = val;
        this.nowIndex=val
        this.handleNodeClick(undefined);
    },
  },
  //初始化数据
  mounted() {
    this.materialQueryTree();
  }
};
</script>
<style lang="scss" scoped>
  @import '../../../assets/css/public.scss';
 .material-main{
        width: 99%;
        background: #FFF;
        // -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        // box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        
        position: relative;
    }
    .material-header{
        display: flex;
        justify-content: space-between;
    }
    .material-title-right{
        margin-top: 20px;
        margin-right: 30px;
        /deep/ .el-input{
          width: 274px;
        }
          /deep/ .el-input__icon{
            line-height: 32px;
          }
    }
    .material-title-left{
        margin-top: 20px;
        margin-left: 30px;
        font-size: 16px;
        color: #2F4554;
        display: inline-block;
        height: 32px;
        line-height: 32px;
    }
    .material-main-list{
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;


      .material-main-item {
        position:relative;
        margin-left: 17px;
        padding: 10px;
        margin-bottom: 20px;
        background-color: #F0F0F0;
        border-radius:4px;
        // box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
        .material-main-item-delete {
          position:absolute;
          top:15px;
          right:15px;
          z-index:999;
          span{
          color:#fff;
        }
        }
      }

    }
    .material-main-item-img{
        width: 110px;
        height: 110px;
    }
    .material-main-item-name{
        width: 60%;
        margin-top: 6px;
        color: #909399;
        float: left;
        /deep/ .el-input{
          width: 80px;
          /deep/ .el-input__inner{
             overflow : hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             height: 25px !important;
          }
        }
    }
    .editText{
          display: block;
          width: auto;
          height: 25px;
          line-height: 32px;
          margin-top: 5px;
          float: right;
        }
    .material-main-item-select{
        border: 1px solid #2F4554;
    }
    .font12{
      font-size: 12px;
    }
    .uploader{
      float:left;
      margin:20px 0 0 20px
    }
    /deep/ .el-tabs{
      border:1px solid rgba(216,216,216,1);
      /deep/ .el-tab-pane{
        padding: 40px 0 60px 23px;
      }
      /deep/ .el-tabs__nav-wrap {
        padding: 0;
        border: none;
      }
    }
    .tab-container{
      /deep/ .el-tabs__item{
        width: 102px !important;
      }
      /deep/ .el-tabs__item {
        border: none !important;
        border-bottom: 1px solid rgba(216,216,216,1) !important;
        color: #909399 !important;
        &.is-active{
          color: #fff !important;
        }
      }
      /deep/ .el-tabs__item.is-active::after{
        width: 0 !important;
      }
      // /deep/ .el-tabs__item:last-child{
         
      // }
    }
    .pagination{
      margin-top: 60px;
    }
</style>
